<!--  -->
<template>
  <div class='搜索'>
      <van-nav-bar
 
  left-text="返回"
  fixed
  left-arrow
  @click-left="$router.back()"
  
>
<template #title>
    <van-search v-model="value" placeholder="请输入搜索关键词" @input="sosuohs"/>
  </template>
</van-nav-bar>
<main  class="content" >
    <div class="item" v-for="item in splb" :key="item.id" :id="item.id" @click="txq(item.id)">
          
           <img :src="item.cover" alt="">
           <div class="buttom">
               <h3>{{item.name}}</h3>
               <span>{{item.price | hhh}} </span>
           </div>
       </div>
</main>
  </div>
</template>

<script>
import { sousuosp } from "network/api.js";
export default { 
name:'',
  data () {
    return {
        value:'',
        index:0,
        splb:[]
    };
  },


  computed: {},


  methods: {
      sosuohs(){
          clearTimeout(this.index)
          let a=setTimeout(async ()=>{
              const key=this.value
              
              const {errcode,errmsg,data} =await sousuosp({key})
              if(errcode!=0) return this.$toast(errmsg)
              if(data.data.length==0) return this.$toast("没有搜索到")
              this.splb=data.data
          },1000)
        this.index=a
      }
  }
}

</script>
<style lang='less' scoped>
    .content{
        height: calc(100vh - 46px);
        overflow-y: scroll;
        margin-top: 46px;
        display: flex;
        justify-content: space-between;
        flex-wrap:wrap;
        .item{
            
            height: 247px;
            width:45vw;
            // height: 230px;
            padding: 2px;
            border: 1px solid #d1d1d1;
            margin:10px 5px 0px 5px; 
            border-radius: 5px;
            box-shadow: 1px 2px 2px 1px rgba(0,0,0, .3);
            img{
                width: 100%;
                
            }
            .buttom{
                padding: 0 10px;
                 h3{
                white-space: nowrap;
                overflow-x:hidden ;
                text-overflow: ellipsis;
                margin-bottom:10px ;
                font-size: 15px;
            }
            span{
                color:#ff681d;
            }
            }
        }
    }
</style>